<template>
    <div class="center">
        <div class="center-form">
          <el-form inline  @submit.native.prevent label-width="120px">
            <el-form-item label="签约账户">
              <el-input v-model="getData.binding_alipay_logon_id" placeholder="请输入签约账户" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="getData.name" placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="小程序名称">
              <el-input v-model="getData.site_name" placeholder="请输入小程序名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商户小程序appid">
              <el-input v-model="getData.tiny_app_id" placeholder="请输入商户小程序appid" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label=" ">
            <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 10px;" :loading="dataLoading" @click="dataSynchronize">数据同步</el-button>
            <el-button type="primary" style="margin-right: 30px;" @click="constructClick">商户进件</el-button>
        </div>
        <div class="center-table">
        <el-table
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
        <el-table-column
            prop="bindingAlipayLogonId"
            label="签约账户"
            align="center"
            width="150"
          ></el-table-column>
        <el-table-column
            prop="merchantPid"
            label="商户PID"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="smid"
            label="直付通商户id"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="name"
            width="200"
            label="商户名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="商户小程序名称"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
                <p> {{ scope.row.siteName}} </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="appAuthToken"
            label="商户小程序appid"
            align="center"
            width="150"
          >
          <template slot-scope="scope">
                <p> {{ scope.row.tinyAppId }} </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="id_card_no"
            label="商户使用服务"
            align="center"
            width="150"
          >
          <template slot-scope="scope">
             <p>{{  funService(scope.row.service)  }}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="结算类型"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
                <p v-if="scope.row.defaultSettleType == 'bankCard' "> {{ '银行卡号：' + scope.row.defaultSettleTarget  }} </p>
                <p v-else> {{ '支付宝：' + scope.row.defaultSettleTarget  }} </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="id_card_no"
            label="商家扣款业务场景"
            align="center"
            width="200"
          >
          <template slot-scope="scope">
             <p>{{ funTradeScene(scope.row.tradeScene) }}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="id_card_no"
            label="商家扣款业务模式"
            align="center"
            width="200"
          >
          <template slot-scope="scope">
             <p>{{ funFeatureName(scope.row.withholdingServiceFeatureName) }}</p>
          </template>
        </el-table-column>
          <el-table-column
            prop="name"
            label="联系人名字"
            align="center"
            width="150"
          >
          <template slot-scope="scope">
                <p> {{ scope.row.contactInfoName }} </p>
            </template>
        </el-table-column>
          <el-table-column
            prop="mobile"
            label="联系人手机号"
            align="center"
            width="150"
          >
          <template slot-scope="scope">
             <p>{{ scope.row.mobile }}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="id_card_no"
            label="联系人身份证"
            align="center"
            width="150"
          >
          <template slot-scope="scope">
             <p>{{ scope.row.idCardNo }}</p>
          </template>
        </el-table-column>
          <el-table-column
            prop="createTime"
            label="构建时间"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="applyStatus"
            label="商户审核状态"
            fixed="right"
            align="center"
            width="120"
          >
           <template slot-scope="scope">
             <p>{{ funReviewStatus(scope.row.recentZhimaReviewStatus)  }}</p>
           </template>
         </el-table-column>
          <el-table-column
            prop="applyStatus"
            label="进件审核状态"
            fixed="right"
            align="center"
            width="120"
          >
           <template slot-scope="scope">
             <p>{{ funApplyStatus(scope.row.applyStatus)  }}</p>
           </template>
         </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
                <el-button
                v-if="scope.row.applyStatus == '99'"
                type="text"
                @click="reviewMin(scope.row)"
                >废弃</el-button>
                <el-button
                v-if="scope.row.merchantId && !scope.row.separateLedgerRate" 
                type="text"
                @click="merchantBinding(scope.row)"
                >商户绑定</el-button>
                <el-button
                v-if="scope.row.merchantId && scope.row.separateLedgerRate && scope.row.recentZhimaReviewStatus == 'PASSED'" 
                type="text"
                @click="merchantUpdata(scope.row)"
                >商户编辑</el-button>
                <el-button
                v-if="!scope.row.merchantId"
                type="text"
                @click="systemBinding(scope.row)"
                >系统绑定</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :current-page.sync="cur_page"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
        <el-dialog
         title="商户进件"
         :visible.sync="inletVisible"
         width="500px"
         :before-close="handleClose">
         <div class="construct-dialog">
            <el-form :model="inletForm" :rules="inletFormRules" ref="inletForm" label-width="120px" >
                <el-form-item label="商户类型" prop="merchant_type" >
                <el-select v-model="inletForm.merchant_type" placeholder="请选择" style="width:340px">
                  <el-option
                    v-for="item in merchantList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- </el-select> -->
               </el-form-item>
                <el-form-item label="签约账户" prop="binding_alipay_logon_id">
                   <el-input v-model="inletForm.binding_alipay_logon_id" placeholder="请输入支付宝签约账户"></el-input>
               </el-form-item>
               <el-form-item label="结算账户" prop="alipay_logon_id">
                   <el-input v-model="inletForm.alipay_logon_id" placeholder="请输入结算支付宝账号"></el-input>
               </el-form-item>
               <el-form-item label="商户名称" prop="name">
                   <el-input v-model="inletForm.name" placeholder="请输入进件的二级商户名称"></el-input>
               </el-form-item>
               <el-form-item label="商户别名" prop="alias_name">
                   <el-input v-model="inletForm.alias_name" placeholder="请输入商户别名"></el-input>
               </el-form-item>
               <el-form-item label="个体工商户名称" prop="cert_name" v-if="inletForm.merchant_type == '07'">
                   <el-input v-model="inletForm.cert_name" placeholder="请输入个体工商户名称"></el-input>
               </el-form-item>
               <el-form-item label="联系人名字" prop="contact_infos.name">
                   <el-input v-model="inletForm.contact_infos.name" placeholder="请输入联系人名字"></el-input>
               </el-form-item>
               <el-form-item label="联系人手机号" prop="contact_infos.mobile">
                   <el-input v-model="inletForm.contact_infos.mobile" placeholder="请输入联系人手机号"></el-input>
               </el-form-item>
               <el-form-item label="联系人身份证" prop="contact_infos.id_card_no">
                   <el-input v-model="inletForm.contact_infos.id_card_no" placeholder="请输入联系人身份证"></el-input>
               </el-form-item>
               <el-form-item label="经营地址" prop="business_address.code">
                <el-cascader
                   style="width:340px"
                   v-model="inletForm.business_address.code"
                   :options="regionList"
                   :props="{ expandTrigger: 'hover' }"
                   @change="regionChange">
                </el-cascader>
               </el-form-item>
               <el-form-item label="详细地址" prop="business_address.address">
                   <el-input v-model="inletForm.business_address.address" placeholder="请输入详细地址"></el-input>
               </el-form-item>
                <el-form-item label="门头照" prop="out_door_images" ref="out_door_images">
                <el-upload
                v-model="inletForm.out_door_images"
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="outDoorImagesSuccess"
                  >
                  <img v-if="out_door_images_url" :src="out_door_images_url" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <el-form-item label="内景照" prop="in_door_images" ref="in_door_images">
                <el-upload
                  v-model="inletForm.in_door_images"
                  :action="uploadUrl"
                  :headers="token"
                  :show-file-list="false"
                  :on-success="inDoorImagesSuccess"
                  >
                  <img v-if="in_door_images_url" :src="in_door_images_url" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <el-form-item label="商户使用服务" prop="service">
                 <el-checkbox-group v-model="inletForm.service" @change="serviceChange">
                    <el-checkbox v-for="item in serveCheckList" :label="item.lable"></el-checkbox>
                  </el-checkbox-group>
               </el-form-item>
               <el-form-item label="结算账户" prop="default_settle_rule.default_settle_type">
                 <el-radio-group v-model="inletForm.default_settle_rule.default_settle_type">
                   <el-radio label="bankCard">结算到银行卡</el-radio>
                   <el-radio label="alipayAccount">结算到支付宝账号</el-radio>
                 </el-radio-group>
               </el-form-item>
               <el-form-item label="结算到账目标" prop="default_settle_rule.default_settle_target">
                   <el-input v-model="inletForm.default_settle_rule.default_settle_target" placeholder="请输入结算到账目标"></el-input>
               </el-form-item>
               <el-form-item label="商家扣款场景" prop="trade_scene">
                 <el-checkbox-group v-model="inletForm.trade_scene" @change="tradeSceneChange">
                    <el-checkbox v-for="item in tradeSceneList" :label="item.value">{{item.lable}}</el-checkbox>
                  </el-checkbox-group>
               </el-form-item>
               <el-form-item label="商家扣款模式" prop="zft_withholding_info.withholding_service_feature_name">
                 <el-radio-group v-model="inletForm.zft_withholding_info.withholding_service_feature_name">
                    <el-radio style="margin-bottom:5px;" v-for="item in serveRadioList" :label="item.value">{{item.lable}}</el-radio>
                  </el-radio-group>
               </el-form-item>
               <el-form-item label="扣款场景码" prop="zft_withholding_info.sign_scene">
                   <el-input v-model="inletForm.zft_withholding_info.sign_scene" disabled placeholder="请输入商家扣款场景码"></el-input>
               </el-form-item>
               <el-form-item label="小程序appId" prop="sites.tiny_app_id" v-if="sitesStatus">
                   <el-input v-model="inletForm.sites.tiny_app_id" placeholder="请输入商家小程序appId"></el-input>
                </el-form-item>
               <el-form-item label="小程序地址"  v-if="sitesStatus">
                   <el-input v-model="inletForm.sites.sites_url" placeholder="请输入小程序地址"></el-input>
               </el-form-item>
               <el-form-item label="小程序名称" prop="sites.site_name"  v-if="sitesStatus">
                   <el-input v-model="inletForm.sites.site_name" placeholder="请输入小程序名称"></el-input>
               </el-form-item>
               <!-- 202404BB549c7aabbefd41e3aaa7284f61ea3X54 -->
               <!-- app_id -->
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="inletVisible = false">取 消</el-button>
           <el-button type="primary" @click="addInletClick">确 定</el-button>
         </span>
       </el-dialog>
       <el-dialog
         :title="payForm.id? '编辑商户信息' :'绑定商户信息'"
         :visible.sync="payVisible"
         width="600px"
         >
         <div class="construct-dialog">
            <el-form :model="payForm" :rules="payFormRules" ref="payForm" label-width="130px" >
                <el-form-item label="商户登录名" prop="merchantLoginName">
                   <el-input v-model="payForm.merchantLoginName" placeholder="请输入商户登录支付宝的手机号或邮箱号"></el-input>
               </el-form-item>
               <el-form-item label="商户PID" prop="merchantPid">
                   <el-input :disabled="payForm.id" v-model="payForm.merchantPid" placeholder="请输入商户PID"></el-input>
               </el-form-item>
               <el-form-item label="商户小程序Appid" prop="merchantAppId">
                   <el-input v-model="payForm.merchantAppId" placeholder="请输入商户小程序Appid"></el-input>
               </el-form-item>
               <el-form-item label="服务商分账比例" prop="separateLedgerRate">
                   <el-input v-model="payForm.separateLedgerRate" placeholder="请输入服务商分账比例（0-30之间）"></el-input>
               </el-form-item>
               <el-button v-if="!settleAccountStatus" type="text" @click="addAccount" style="margin-left:20px;">添加更多分账账号</el-button>
               <el-form-item class="form-settleAccount" prop="settleAccountList" v-else>
                <p> 更多分账设置 </p>
                <el-button @click="addSettleAccountClick" style="margin:15px 0 20px 0;" type="primary" size="small">添加一个分账</el-button>  
                <el-table
                  :data="payForm.settleAccountList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="settleAccount"
                    label="账号"
                    align="center"
                    width="180">
                    <template slot-scope="scope">
                       <el-input v-model="scope.row.settleAccount" placeholder="请输入分账支付宝账号"></el-input>
                   </template>
                  </el-table-column>
                  <el-table-column
                    prop="separateLedgerRate"
                    align="center"
                    label="比例（%）"
                    width="120">
                    <template slot-scope="scope">
                       <el-input v-model="scope.row.separateLedgerRate" placeholder="请输入分账比例（%）"></el-input>
                   </template>
                  </el-table-column>
                  <el-table-column
                    prop="payeeRealName"
                    label="收款方实名"
                    width="150"
                    align="center"
                    >
                    <template slot-scope="scope">
                       <el-input v-model="scope.row.payeeRealName" placeholder="请输入收款方实名"></el-input>
                   </template>
                  </el-table-column>
                  <el-table-column
                   fixed="right"
                   align="center"
                   label="操作"
                 >
                   <template slot-scope="scope">
                    <el-popconfirm
                     title="是否确认删除？"
                     @confirm="deldetSettleAccount(scope.$index)"
                   >
                   <el-button
                       slot="reference"
                       type="text"
                       style="color:red"
                       >删除</el-button>
                   </el-popconfirm>
                   </template>
                 </el-table-column>
                </el-table>
               </el-form-item>
               <div class="payForm-tips" > <div class="payForm-tips-border"> </div> <p> 以下内容新增/编辑时需要审核通过才能生效 </p> <div class="payForm-tips-border"> </div></div>
               <el-form-item label="直付通侧商户ID" prop="smid">
                   <el-input v-model="payForm.smid" placeholder="请输入直付通侧商户ID"></el-input>
               </el-form-item>
               <el-form-item label="商户名称" prop="merchantName">
                   <el-input v-model="payForm.merchantName" placeholder="请输入商户名称"></el-input>
               </el-form-item>
               <el-form-item label="商户联系方式" prop="phone">
                   <el-input v-model="payForm.phone" placeholder="请输入商户联系方式"></el-input>
               </el-form-item>
               <el-form-item label="商户logo" prop="logoUrl">
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-remove="logoRemove"
                  :on-success="logoUpLoadSuccess"
                  :before-upload="beforeUpload"
                  >
                  <img v-if="payForm.logoUrl" :src="payForm.logoUrl" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
              </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="payVisible = false">取 消</el-button>
           <el-button type="primary" @click="payFormStatusClick">确 定</el-button>
         </span>
       </el-dialog>
       <!-- 系统绑定 -->
       <el-dialog
         title="系统绑定"
         :visible.sync="systemVisible"
         width="470px"
         >
         <div>
            <el-form
            :model="systemFrom"
            ref="systemFrom"
            label-width="100px"
            >
              <el-form-item label="所属商户" prop="merchantName" :rules="[ { required: true, message: '请选择所属商户', trigger: 'change' }]">
                <el-autocomplete @select="merchantIdSelect" style="width: 300px;" v-model.trim="systemFrom.merchantName" :fetch-suggestions="merchantslist" :debounce="300" placeholder="请输入商户名称进行查询" ></el-autocomplete>
              </el-form-item> 
             </el-form>
           </div>
         <span slot="footer" class="dialog-footer">
              <el-button @click="systemVisible = false">取 消</el-button>
              <el-button type="primary" @click="systemBindingClick">确 定</el-button>
          </span>
       </el-dialog>
    </div> 
</template>

<script>
import { bindSysMerchant , synInfoMerchant , logoUpload , createMerchant , merchantsDelete , simpleCreate , simpleCreateQuery , getAreaList , simpleCreateUpload } from "@/api/fetchApi"
import { merchantlist } from "@/api/api";
export default{
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + "/payment/orders/logoUpload",
            token: { token: sessionStorage.getItem("token") },
            getData:{
               page:1,
               size:10
            },
            tableList:[],
            regionList:[],
            total:0,
            inletForm:{
                merchant_type:'07',
                contact_infos:{},
                business_address:{},
                service:[],
                trade_scene:[],
                default_settle_rule:{},
                zft_withholding_info:{
                  sign_scene:'INDUSTRY|ZM_PAY_AFTER_USE'
                },
                sites:{
                    site_type:'06',
                },
                mcc:'B0044'
            },
            inletFormRules:{
                merchant_type:[{ required: true, message: '请选择商户类型', trigger: 'change' }],
                binding_alipay_logon_id:[{ required: true, message: '请输入支付宝签约账户', trigger: 'blur' }],
                name:[{ required: true, message: '请输入进件的二级商户名称', trigger: 'blur' }],
                alipay_logon_id:[{ required: true, message: '请输入结算支付宝账号', trigger: 'blur' }],
                alias_name:[{ required: true, message: '请输入商户别名', trigger: 'blur' }],
                cert_name:[{ required: true, message: '请输入个体工商户名称', trigger: 'blur' }],
                'contact_infos.name':[{ required: true, message: '请输入联系人名字', trigger: 'blur' }],
                'contact_infos.mobile':[{ required: true, message: '请输入联系人手机号', trigger: 'blur' }],
                'contact_infos.id_card_no':[{ required: true, message: '请输入联系人名字', trigger: 'blur' }],
                'business_address.code':[{ required: true, message: '请选择经营地址', trigger: 'change' }],
                'business_address.address':[{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                 out_door_images:[{required: true, validator:(rule , value , callback)=>{
                    if(this.inletForm.out_door_images){
                        callback();
                    }else{
                        callback(new Error('请上传门头照！'));
                    }
                 } }],
                 in_door_images:[{ required: true, validator: (rule , value , callback)=>{
                    if(this.inletForm.in_door_images){
                        callback();
                    }else{
                        callback(new Error('请上传内景照！'));
                    }
                 } }],
                 service:[{ required: true, message: '请选择商户使用服务！', trigger: 'blur' }],
                 'default_settle_rule.default_settle_type':[{ required: true, message: '请选择结算类型！', trigger: 'change' }],
                 'default_settle_rule.default_settle_target':[{ required: true, message: '请输入结算到账目标', trigger: 'blur' }],
                 trade_scene:[{ required: true, message: '请选择商家扣款场景！', trigger: 'change' }],
                 'zft_withholding_info.withholding_service_feature_name':[{ required: true, message: '请选择商家扣款模式', trigger: 'change' }],
                 'zft_withholding_info.sign_scene':[{ required: true, message: '请输入商家扣款场景码', trigger: 'blur' }],
                 'sites.tiny_app_id':[{ required: true, message: '请输入商家小程序appId', trigger: 'blur' }],
                 'sites.site_name':[{ required: true, message: '请输入商家小程序名称', trigger: 'blur' }],
            },
            serveCheckList:[{lable:'当面付',value:'当面付'},{lable:'商户代扣',value:'商户代扣'},{lable:'小程序支付',value:'小程序支付'}],
            tradeSceneList:[{lable:'小程序支付场景',value:'TINY_APP'},{lable:'H5场景',value:'WAP'},{lable:'APP支付场景',value:'APP'},{lable:'网站支付场景',value:'PC'}],
            serveRadioList:[{lable:'通用代扣',value:'GENERAL_WITHHOLDING_P'},{lable:'周期扣款',value:'CYCLE_PAY_AUTH_P'},{lable:'单次代扣',value:'ONE_TIME_AUTH_P'},{lable:'免密支付',value:'NOPWD_P'}],
            inletVisible:false,
            merchantList:[{label:'企业进件',value:'01'},{label:'个体工商户进件',value:'07'},{label:'个人商户',value:'06'}],
            in_door_images_url:'',
            out_door_images_url:'',
            sitesStatus:false,
            payForm:{
              settleAccountList:[],
              merchantLoginName:'',
              merchantPid:'',
              merchantAppId:'',
              separateLedgerRate:'',
              smid:'',
              merchantName:'',
              phone:'',
              logoUrl:''
            },
            payVisible:false,
            payFormRules:{ 
              merchantLoginName:[{ required: true, message: '请输入商户登录支付宝的手机号或邮箱号!', trigger: 'blur' }],
              merchantPid:[{ required: true, message: '请输入商户PID!', trigger: 'blur' }],
              merchantAppId:[{ required: true, message: '请输入商户小程序Appid!', trigger: 'blur' }],
              separateLedgerRate:[{ required: true, message: '请输入服务商分账比例（0-30之间）!', trigger: 'blur' },
                           {required: true, validator:(rule , value , callback)=>{
                                 if(this.payForm.separateLedgerRate *1 > 30){
                                     callback(new Error('服务商分账比例不能超过30!'));
                                 }else{
                                     callback();
                                 }
                          }}
              ],
              smid:[{ required: true, message: '请输入直付通侧商户ID!', trigger: 'blur' }],
              merchantName:[{ required: true, message: '请输入商户名称!', trigger: 'blur' },
                           {required: true, validator:(rule , value , callback)=>{
                                 if(this.payForm.merchantName.length>8){
                                     callback(new Error('商户名称长度不能超过8!'));
                                 }else{
                                     callback();
                                 }
                          }}
              ],
              phone:[{ required: true, message: '请输入商户联系方式!', trigger: 'blur' }],
              settleAccountList:[{required: true, validator:(rule , value , callback)=>{
                    if(this.payForm.settleAccountList.length>0){
                      const data =  this.payForm.settleAccountList.find(item => !item.settleAccount || !item.separateLedgerRate || !item.payeeRealName)
                       if(data){
                         callback(new Error('请补充分账信息!'));
                       }else{
                        let settleAccount = 0
                        this.payForm.settleAccountList.forEach(item=>{
                          settleAccount +=item.separateLedgerRate * 1
                        })
                        if(settleAccount> this.payForm.separateLedgerRate){
                          callback(new Error('不能超过服务商比例!'));
                        }else{
                          callback();
                        }
                       }
                    }else{
                      callback();
                    }
                 } }],
              logoUrl:[{required: true, validator:(rule , value , callback)=>{
                    if(this.payForm.logoUrl){
                        callback();
                    }else{
                        callback(new Error('请上传商户logo！'));
                    }
                 } }],
            },
            settleAccountStatus:false,
            dataLoading:false,
            systemVisible:false,
            systemFrom:{},
        }
    },
    mounted(){
       this.initList()
       this.initArealist()
    },
    methods:{
       async initList(){
          this.tableList = []
          const res = await  simpleCreateQuery(this.getData)
          this.total = res.pageInfo.recordCount
          res.data.forEach(item=>{
             let obj = {}
             obj = Object.assign(item.simpleCreateDO , item.cycleMerchantDO)
             this.tableList.push(obj)
          })
          // console.log(this.tableList)
        },
        async initArealist(){
           const res = await getAreaList()
           this.regionList = res.areaItems
        },
        funTradeScene(v){
            v = v.split(';')
            const tradeSceneList = [{lable:'小程序支付场景',value:'TINY_APP'},{lable:'H5场景',value:'WAP'},{lable:'APP支付场景',value:'APP'},{lable:'网站支付场景',value:'PC'}]
            let lable = ''
            v.forEach((item,index)=>{
                const data =  tradeSceneList.find(items=>items.value == item)
                if(!data) return
                if(index == 0){
                    lable +=data.lable
                }else{
                    lable +=','+data.lable
                }
            })
            return lable
        },
       async  dataSynchronize(){
             this.dataLoading = true
              const res = await synInfoMerchant({page:1,size:100})
              if(res.code == '200'){
                this.dataLoading = false
                this.$message.success('同步成功')
                this.initList()
              }else{
                this.dataLoading = false
                this.$message.error(res.msg)

              }
        },
        regionChange(v){
            this.inletForm.business_address.code = v
            // this.inletForm.business_address = {}
            this.inletForm.business_address.province_code = v[0]
            this.inletForm.business_address.city_code = v[1]
            this.inletForm.business_address.district_code = v[2]
        },
        beforeUpload(file){
          const that = this
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = e => {
          const base64 = e.target.result
           logoUpload({picData:base64}).then(res=>{
            that.payForm.logoUrl = res.pictureUrl
            that.$forceUpdate()
             console.log(that.payForm.logoUrl)
             })
        // this.uploadAction = base64 // 将Base64字符串作为action传递
          }
        return false;
        },
        logoRemove(){
          this.payForm.outDoorPic = ''
        },
        // logoUpLoadSuccess(response){
          
        //    this.payForm.logoUrl = response.data.filePath
        //    this.$forceUpdate()
        // },
        constructClick(){
            this.inletVisible = true
            this.inletForm = {
              merchant_type:'07',
                contact_infos:{},
                business_address:{},
                service:[],
                trade_scene:[],
                default_settle_rule:{},
                zft_withholding_info:{
                  sign_scene:'INDUSTRY|ZM_PAY_AFTER_USE'
                },
                sites:{
                    site_type:'06',
                },
                mcc:'B0044'
            }
            this.$nextTick(()=>{
              this.$refs.inletForm.clearValidate()
            })
        },
        async addInletClick(){
          const  valid = await this.$refs.inletForm.validate()
          this.inletForm.external_id = Date.now().toString()
          if(valid){
           const res = await simpleCreate(this.inletForm)
           if(res.result_code == 'SUCCESS'){
                this.inletVisible =  false
                this.$message.success('进件成功，请让商户确认！');
                this.reastForm()
                this.initList()
           }else{
                this.$message.error(res.return_msg);
           }
          }
        },
        resetList(){
           this.getData = {
               page:1,
               size:10
           }
           this.initList()
        },
        funService(v){
          //  console.log()
           v =  v.split(';')
           let lable = ''
           v.forEach((item,index)=>{
               if(index>0){
                lable =lable + ',' + item
               }else{
                lable += item
               }
           })
           return  lable
        },
        serviceChange(v){
           const data = v.find(item=>item == '小程序支付')
           const sceneData = this.inletForm.trade_scene.find(item=>item == 'TINY_APP')
           if(data || sceneData){
             this.sitesStatus = true
           }else{
            this.sitesStatus = false
           }
        },
        tradeSceneChange(v){
            const sceneData = v.find(item=>item == 'TINY_APP')
           const data = this.inletForm.service.find(item=>item == '小程序支付')
           if(data || sceneData){
             this.sitesStatus = true
           }else{
            this.sitesStatus = false
           }
        },
        // 废弃
       async reviewMin(v){
          const  confirm =  await  this.$confirm("是否确定废弃？如确定，该操作不可逆。", "提示", { confirmButtonText: "确定",   cancelButtonText: "取消",  type: "warning"})
           if(confirm){
              const res = await merchantsDelete({smid:v.smid})
              if(res.result_code == 'SUCCESS'){
                this.$message.success('废弃成功！');
                   this.initList()
              }else{
                this.$message.error(res.return_msg);
                // this.initList()
              }
           }
        },
        async payFormStatusClick(){
          const  valid = await this.$refs.payForm.validate()
          if(valid){
            const res = await createMerchant(this.payForm)
            console.log(res)
            if(res.result_code == 'SUCCESS'){
              this.payVisible = false
              this.initList()
              this.$message.success('操作成功！');
            }else{
              this.$message.error(res.return_msg);
            }
          }
        },
        // 系统绑定
        async systemBindingClick(){
          const valid  = await this.$refs.systemFrom.validate()
          if(valid){
             const res = await bindSysMerchant(this.systemFrom)
             if(res.code == 200){
               this.$message.success('操作成功！');
               this.initList()
             }else{
              this.$message.error(res.message);
             }
          }
        },
        
        systemBinding(v){
            this.systemVisible = true
            this.systemFrom.simpleMerchantId = v.id
        },
        merchantslist(queryString, cb) {
         let sosolist = {};
         sosolist = {
             page: 1,
             size: 20,
             merchantName: this.systemFrom.merchantName,
           };
         merchantlist(sosolist).then(res => {
           // console.log(res);
           if (res.code == 405) {
             sessionStorage.removeItem("token");
             this.$router.push("/login");
           } else {
              let merchantarrlist = []
             for(var i=0;i<res.data.length;i++){
              merchantarrlist.push({'value':res.data[i].merchantName + ' — ' + res.data[i].merchantNo,'id':res.data[i].id})
             }
              let results = queryString
               ? merchantarrlist.filter(this.createFilter(queryString))
               : merchantarrlist
             // 调用 callback 返回建议列表的数据
             cb(results)
           }
         })
         },
         merchantIdSelect(item) {
          // console.log(item)
          this.systemFrom.merchantId = item.id
          this.systemFrom.merchantName = item.value
         },
         createFilter(queryString) {
           return restaurant => {
           return (
           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
           )
          }
        },
        merchantUpdata(v){
          this.payVisible = true
          this.payForm = v
        },
         // 商户绑定
        merchantBinding(v){
          this.payVisible = true
          setTimeout(()=>{
            this.$refs.payForm.resetFields()
            this.payForm.settleAccountList = []
            this.settleAccountStatus = false
          })
        },
        deldetSettleAccount(i){
            this.payForm.settleAccountList.splice(i,1)
            if(!this.settleAccountList.length){
              this.settleAccountStatus = false
            }
            this.$forceUpdate()
        },
        addSettleAccountClick(){
          if(this.payForm.settleAccountList.length>=6) {
            this.$message.error('分账账户数量不能超过6个 ！')
          }else{
            this.payForm.settleAccountList.push({settleAccount:'',separateLedgerRate:'',payeeRealName:''})
          }
        },
        // 添加服务商分账比例
        addAccount(){
          if(!this.payForm.separateLedgerRate){
            this.$message.error('请先配置服务商分账比例 ！')
          }else{
            this.payForm.settleAccountList = []
            this.payForm.settleAccountList.push({settleAccount:'',separateLedgerRate:'',payeeRealName:''})
            this.settleAccountStatus = true
          }
           
        },
        funFeatureName(v){
          const serveRadioList = [{lable:'通用代扣',value:'GENERAL_WITHHOLDING_P'},{lable:'周期扣款',value:'CYCLE_PAY_AUTH_P'},{lable:'单次代扣',value:'ONE_TIME_AUTH_P'},{lable:'免密支付',value:'NOPWD_P'}]
          const data =   serveRadioList.find(item=>item.value == v)
          return data.lable
        }, 
        funApplyStatus(v){
           const statusList = [{value:'99',label:'进件成功'},{value:'-1',label:'进件失败'},{value:'031',label:'审核中'}]
           const  data = statusList.find(item => item.value == v )
           return data.label
        },
        funReviewStatus(v){
          const statusList = [{value:'INCOMPLETE',label:'未补全'},{value:'UNDER_REVIEW',label:'审核中'},{value:'PASSED',label:'已通过'},{value:'FAILED',label:'未通过'}]
          const  data = statusList.find(item => item.value == v )
          return data.label
        },
        handleCurrentChange(val) {
          this.getData.page = val;
          this.initList()
        },
        sizechange(val) {
          this.getData.size = val;
          this.initList()
        },
        reastForm(){
            this.inletForm={
                merchant_type:'07',
                contact_infos:{},
                business_address:{},
                service:[],
                trade_scene:[],
                default_settle_rule:{},
                zft_withholding_info:{
                  sign_scene:'INDUSTRY|ZM_PAY_AFTER_USE'
                },
                sites:{
                    site_type:'06',
                },
                mcc:'B0044'
            }
        },
       async outDoorImagesSuccess(v){
            this.out_door_images_url = v.data.filePath
           const res = await simpleCreateUpload({imgUrl:v.data.filePath,name:'门头照'})
           this.inletForm.out_door_images = res.image_id
           this.$refs.out_door_images.clearValidate()
        },
        async inDoorImagesSuccess(v){
            this.in_door_images_url = v.data.filePath
            const res = await simpleCreateUpload({imgUrl:v.data.filePath,name:'门头照'})
           this.inletForm.in_door_images = res.image_id
           this.$refs.in_door_images.clearValidate()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       },
    }
}
</script>
<style scoped>
.center{
    width: calc(100% - 40px);
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    padding:30px  0 0 0;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.avatar{
    width:160px;
    height:160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.imagesUpload{
    display:flex;
}
.center-form{
  padding: 0 22px;
}

.payForm-tips{
   display:flex;
   justify-content:center;
   align-items:center;
   margin:30px 0;
}

.payForm-tips .payForm-tips-border{
  width:75px;
  height:1px;
  background-color:#999;
}

.payForm-tips p{
  margin:0 5px;
}

.form-settleAccount{
  margin-left:-100px;
}

.center-table{
    margin-top: 30px;
    padding: 0 40px;
}
</style>